<template>
  <ProductNav :title="`搜索 / ${keyword}`"></ProductNav>
  <section class="search-container">
    <section class="search-wrapper">
      <FeedCard :key="product.pro_no" v-for="product in products.value" :info="product"></FeedCard>
    </section>
  </section>
</template>

<script setup lang="ts">
import ProductNav from '../components/product/ProductNav.vue';
import {useRoute} from 'vue-router';
import {reactive, effect, computed} from '@vue/reactivity';
import {getProducts} from '../api/productApi';
import FeedCard from '../components/product/FeedCard.vue';

const route = useRoute();
const products = reactive({
  value: [],
});
effect(() => {
  getProducts({
    keyword: route.params.keyword,
    limit: 50,
  }).then(res => {
    products.value = res.data;
  });
});

const keyword = computed(() => {
  return route.params.keyword
});
</script>
<style scoped>
.search-container {
  background-color: #f3f3f3;
  padding: 20px 0 40px;
  min-height: 100%;
}

.search-wrapper {
  width: 1226px;
  min-width: 1226px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 14px;
}
</style>
